<template>
	<div class="booklist">
		<ul>
			<li v-for="(item, index) in booklist" :key="item.id">
				<router-link :to="`/mobile/bookdetail/${item.id}`">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
					<h3 v-html="item.name"></h3>
					<span v-show="item.price != 0">￥{{item.price}}</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	import {
		Dialog
	} from 'element-ui'
	export default {
		name: 'MobileBookList',
		props: ['typeid', 'typedate'],
		data() {
			return {
				booklist: [],
				total: 0
			}
		},
		async mounted() {
			await this.$axios.get("/api/public/findPageBook/0/0/" + this.typeid).then(res => {
				this.total = res.data.data.total
			})
			await this.$axios.get("/api/public/findPageBook/1/" + this.total + "/" + this.typeid).then(res => {
				this.booklist = res.data.data.books
			})
			if (this.$route.query.title != null) {
				this.typeid = -1
				let fd = new FormData();
				fd.append("key", this.$route.query.title)
				this.$axios.post("/api/public/book/findPageKey/1/6", fd).then(res => {
					this.booklist = res.data.data.books
				})
			}
		},
		watch: {
			typeid() {
				this.$axios.get("/api/public/findPageBook/1/" + this.total + "/" + this.typeid).then(res => {
					this.booklist = res.data.data.books
				})
			},
			typedate() {
				if (this.typedate != 0) {
					this.$axios.get("/api/public/findPageBook/1/" + this.total + "/" + this.typeid).then(res => {
						this.booklist = res.data.data.books.forEach((item, i) => {
							if (this.typedate == item.tmake.slice(0, 4).toString()) {
								books.push(item);
							}
						})
					})
				} else {
					this.$axios.get("/api/public/findPageBook/1/" + this.total + "/" + this.typeid).then(res => {
						this.booklist = res.data.data.books
					})
				}
			}
		}
	}
</script>

<style scoped>
	.booklist {
		padding-bottom: 2rem;
		width: 100%;
		height: auto;
		background-color: #f5d5a0;
	}

	.booklist ul {
		width: 96%;
		margin: 0 auto 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.booklist ul li {
		width: 46%;
		overflow: hidden;
		margin-bottom: 0.5rem;
		margin-left: 0.6rem;
		background-color: white;
		text-align: center;
		position: relative;
	}

	.booklist ul li img {
		width: 80%;
		height: 10rem;
		margin-top: 1rem;
	}

	.booklist ul li h3 {
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.8rem;
		background-color: rgba(245, 213, 160, 0.5);
		color: #a67b5b;
		text-align: center;
		font-weight: normal;
		/* 中文强制不换行 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 支持 webkit内核的浏览器才能生效 */
		/* overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; */
	}

	.booklist ul li span {
		font-size: 0.7rem;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		right: 0;
		color: gold;
		padding: 0.5rem 0.3rem;
		border-radius: 0 0 0 0.6rem;
	}
</style>